<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '名称', key: 'name', sortable: false},
    {title: '性别', key: 'sex', sortable: false},
    {title: '所属医院', key: 'hospitalCode', sortable: false},
    // {title: '身份证', key: 'idCard', sortable: false},
    {title: '手机号', key: 'mobile', sortable: false},
    // {title: '户籍地址', key: 'householdAddress', sortable: false},
    {title: '照片', key: 'photoUrl', sortable: false},
    {title: '描述信息', key: 'description', sortable: false},
    {title: '新增时间', key: 'createTime', sortable: false},
    {title: '更新时间', key: 'updateTime', sortable: false},
    {title: '状态', key: 'status', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);

const userInfo = ref(JSON.parse(localStorage.getItem('ZAYY_USER_INFO')));
const search = ref('');
const name = ref("");
const mobile = ref("");
const hospitalCode = ref(null);
const updatePasswordType = ref(false);
const hospitalList = ref([]);
const dictList = ref([]);
const dictType = ref(null);
// const imgBaseUrl = ref("http://10.10.10.49:9991/healthCommission/images/");
const imgBaseUrl = ref("http://101.68.222.195:9991/healthCommission/images/");
watch(name, () => {
    search.value = name.value
})
watch(mobile, () => {
    search.value = mobile.value
})
watch(hospitalCode, () => {
    search.value = hospitalCode.value
})
watch(dictType, () => {
    search.value = dictType.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    axios.post('/basBlack/selectPage', {
        pageNo: page,
        pageSize: itemsPerPage,
        name: name.value === null ? null : name.value,
        hospitalCode: hospitalCode.value,
        sex: "",
        idCard: "",
        mobile: mobile.value,
        isRead: "",
        description: dictType.value
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    axios.post("/basHosptial/selectList",{}).then(res => {
        hospitalList.value = res.data.data
    })
    axios.post("/sysDictData/selectList", {dictType: "black_type"}).then(res => {
        dictList.value = res.data.data
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    status: "1"
});

function resetEditedItem() {
    editedItem.value = {
        name: null,
        sex: "",
        hospitalCode: "",
        idCard: "",
        mobile: "",
        householdAddress: "",
        photoUrlUpload: [],
        description: null,
        status: "1"
    }
}

function updatePassword() {
    updatePasswordType.value = true;
    editedItem.value.password = ""
}

function clickNew() {
    dialogType.value = dialogEnum.create
    resetEditedItem()
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    if(editedItem.value.officeIds) {
        editedItem.value.officeIds = Number(editedItem.value.officeIds)
    }
    editedItem.value.deptIdss = editedItem.value.deptIds ? editedItem.value.deptIds.split(",").map(item => Number(item)) : []
    editedItem.value.checkDeptIdss = editedItem.value.checkDeptIds ? editedItem.value.checkDeptIds.split(",").map(item => Number(item)) : []
    editedItem.value.checkRoleIds = editedItem.value.checkRoleIds ? editedItem.value.checkRoleIds.split(",").map(item => Number(item)) : []
    delete editedItem.value.password
    editedItem.value.roleIds = Number(editedItem.value.roleIds)
    updatePasswordType.value = false
    editedItem.value.status += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/user/updateUser',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: 1, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/basBlack/saveBlack',
            data: editedItem.value
        }).then(() => {
            snackbar.info('创建成功')
            close()
            loadItems({page: 1, itemsPerPage: itemsPerPage.value})
        }, err => {
            snackbar.info(err.response.data.message)
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    let obj = {
        id: beDeleteItem.value.id,
        status: beDeleteItem.value.status ? 0 : 1
    }
    axios.post('/basBlack/updateBlack', obj).then(() => {
        snackbar.info("操作成功")
        loadItems({page: 1, itemsPerPage: itemsPerPage.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = {}
}

function uploadFile() {
    if(editedItem.value.photoUrlUpload.length) {
        var formData = new FormData();
        formData.append('file', editedItem.value.photoUrlUpload[0])
        axios({
            method: "POST",
            url: "/basBlack/uploadImage",
            data: formData,
            headers: {
                'Content-Type': "multipart/form-data"
            }
        }).then(res => {
            if(res.data.code == 200) {
                snackbar.info("上传成功")
                editedItem.value.photoUrl = res.data.data
            }
        })
    }
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>黑名单管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details label="查询名称"></v-text-field>
        <v-text-field v-model="mobile" :clearable="true" hide-details label="查询手机号"></v-text-field>
        <v-select
        :items=hospitalList
        item-title="name"
        item-value="code"
        v-model="hospitalCode"
        :clearable="true"
        hide-details
        label="所属医院"></v-select>
        <v-select
        :items=dictList
        item-title="dictLabel"
        item-value="dictValue"
        v-model="dictType"
        :clearable="true"
        hide-details
        label="描述信息"></v-select>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.name" label="名称" required></v-text-field>
                    <v-text-field v-model="editedItem.sex" label="性别" required></v-text-field>
                    <v-select
                    v-model="editedItem.hospitalCode"
                    :items=hospitalList
                    item-title="name"
                    item-value="code"
                    label="所属医院"
                    ></v-select>
                    <v-text-field v-model="editedItem.idCard" label="身份证" required></v-text-field>
                    <v-text-field v-model="editedItem.mobile" label="手机号" required></v-text-field>
                    <v-text-field v-model="editedItem.householdAddress" label="户籍地址" required></v-text-field>
                    <v-file-input v-model="editedItem.photoUrlUpload" label="照片" @change="uploadFile" prepend-icon="mdi-camera"></v-file-input>
                    <v-select
                    :items=dictList
                    item-title="dictLabel"
                    item-value="dictValue"
                    v-model="editedItem.description"
                    label="描述信息"></v-select>
                    <v-select
                    v-model="editedItem.status"
                    :items="[{value:'1',title:'正常'},
                    {value:'2',title:'禁用'}]"
                    label="状态"></v-select>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ !beDeleteItem.status ? '启用' : '禁用' }}{{ beDeleteItem.name }}?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.hospitalCode="{ item }">
            <span v-for="k in hospitalList" v-show="k.code == item.raw.hospitalCode">{{ k.name }}</span>
        </template>
        <template v-slot:item.description="{ item }">
            <span v-for="k in dictList" v-show="k.dictValue == item.raw.description">{{ k.dictLabel }}</span>
        </template>
        <template v-slot:item.photoUrl="{ item }">
            <el-image :src="imgBaseUrl + item.raw.photoUrl" :preview-src-list="[imgBaseUrl + item.raw.photoUrl]" style="height: 80px;width: 70px;" alt=""></el-image>
        </template>
        <template v-slot:item.status="{ item }">
            <v-chip v-if="item.raw.status == 1" color="green">
                正常
            </v-chip>
            <v-chip v-if="item.raw.status == 0" color="red">
                禁用
            </v-chip>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn
            v-if="item.raw.status == 1"
            color="red"
            variant="tonal"
            @click="clickDelete(item.raw)">禁用</v-btn>
            <v-btn
            v-if="item.raw.status == 0"
            color="blue"
            variant="tonal"
            @click="clickDelete(item.raw)">启用</v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped>
:deep(.v-data-table__tr:nth-child(odd) .v-data-table__td) {
    background-color: rgba(240, 240, 240, 0.40);
}
:deep(.v-data-table__tr .v-data-table__td) {
    border: none !important;
}
:deep(.v-data-table__thead .v-data-table__td) {
    border: none !important;
}
</style>
